<template>
	<!-- 我的推广 -->
	<view class="extension">
		<view class="backPage" @click="backPage" :style="{top,height,lineHeight:height}">返回</view>
		<view class="header">
			<view class="bg"></view>
		</view>
		<view class="cont" :style="{top: martop + 'px'}">
			<view class="cart">
				<view><text>我的余额</text></view>
				<view><text>￥{{vuex_myinfo.money}}</text></view>
				<view><text v-if="isShenghe" @click="C_Withdrawal">提现</text></view>
			</view>

			<view class="list">
				<view class="tit">
					<text v-for="(item,index) in nav.arr" :key='index' :class="nav.active == index ? 'active':''"
						@click="nav.active = index">{{item}}</text>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="lower()" class="scroll-Y"
					:style="{ height: navHeight + 'px' }">
					<view class="item" v-if="!nav.active">
						<view v-for="(item,index) in list" :key='index'>
							<image v-if="vuex_httpImageUrl" :src="item.avatar" mode="widthFix"></image>
							<view style="flex:1">
								<view class="lr">
									<text>{{item.name}}</text>
									<text class="gray">{{item.createtime}}</text>
								</view>
								<view class="lr">
									<text class="gray">获得佣金：￥{{item.money}}</text>
									<view>
										<text class="gray">剩余佣金：</text>
										<text>￥{{item.surplus_money}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="item" v-else>
						<view>共{{listTeam.length}}个人</view>
						<view v-for="(item,index) in listTeam">
							<image v-if="vuex_httpImageUrl" :src="item.avatar" mode="widthFix"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0 + "px",
				height: 44 + "px",
				martop: -57,
				nav: {
					arr: ['佣金明细', '我的下级'],
					active: 0
				},

				list: [],
				listTeam: [],

				pageNum: 1,
				isShenghe: false
			};
		},
		mounted() {
			const self = this
			uni.getSystemInfo({
				success: function(res) {
					// 根据 model 进行判断
					console.log(res.model, 'res.model');
					let mobileArr = ['iPhone X', 'iPhone XR', 'iPhone XS Max', 'iPhone 11', 'iPhone 11 Pro',
						'iPhone 11 Pro Max'
					]
					console.log(mobileArr.includes(res.model), 'mobileArr.indexOf(res.model)');
					if (mobileArr.includes(res.model)) {
						self.martop = -36
						self.top = 20 + "px"
					}
				}
			})
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: res => {
					let pH = res.windowHeight;
					let titleH = uni.createSelectorQuery().in(this).select('.scroll-Y');
					titleH.boundingClientRect(data => {
						that.navHeight = pH - (data.top + 20);
					}).exec();
				}
			});
		},
		watch: {
			'nav.active'(idx) {
				this.pageNum = 1
				idx == 0 ? this.getYjMx() : this.getMyTeam()
			},
		},
		async onShow() {
			this.getYjMx()

			let myinfo = await this.$u.api.myinfo() //个人信息
			this.$u.vuex('vuex_myinfo', myinfo.data)

			this.$u.post('index/tx_set').then(res => {
				this.isShenghe = res.data.txstatus
			})
		},
		methods: {

			lower() {
				console.log('打印了')
				this.pageNum++
				if (this.nav.active == 0) {
					this.getYjMx(this.pageNum)
				} else {
					this.getMyTeam(this.pageNum)
				}
			},
			// 佣金明细
			getYjMx(page = 1) {
				this.list
				this.$u.post('/appuser/missionlst', {
					page,
					perPage: 10
				}).then(res => {
					console.log(res.data);
					let {
						list,
						count
					} = res.data
					console.log(JSON.parse(JSON.stringify(list)));
					if (list.length == 0) {
						this.$u.toast('没有更多数据了')
						return
					}
					if (page == 1) {
						this.list = list
					} else {
						this.list.push(...list)
					}
				})
			},
			// 我的团队
			getMyTeam(page = 1) {
				this.$u.post('appuser/junior_user', {
					page,
					perPage: 10
				}).then(res => {
					console.log(res.data);
					let {
						list,
						count
					} = res.data
					if (page == 1) {
						this.listTeam = list
					} else {
						this.listTeam.push(...list)
					}
				})
			},
			backPage() {
				uni.navigateBack()
			},
			C_Withdrawal() {
				uni.navigateTo({
					url: './Withdrawal/Withdrawal'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	.scroll-Y {
		width: 100%;
		white-space: nowrap;
	}

	.backPage {
		margin-top: var(--status-bar-height);
		;
		position: fixed;
		color: #FFFFFF;
		z-index: 2;
		padding: 0 0 0 45rpx;

		&::after {
			content: '';
			display: block;
			width: 15rpx;
			height: 15rpx;
			border-top: 1px solid #FFFFFF;
			border-left: 1px solid #FFFFFF;
			position: absolute;
			top: calc(50% - 7.5rpx);
			left: 20rpx;
			transform: rotate(-45deg);
		}
	}

	.header {
		position: relative;

		.bg {
			background-color: #222222;
			height: 250rpx;
			position: relative;

			&:after {
				content: '';
				display: block;
				background-color: #222222;
				position: absolute;
				left: -15%;
				width: 130%;
				height: 250rpx;
				border-bottom: 150rpx;
				bottom: -50rpx;
				z-index: -1;
				border-bottom-right-radius: 150%;
				border-bottom-left-radius: 150%;

			}
		}
	}

	.cont {
		position: relative;


		.cart {
			background-color: #EFD7A9;
			width: 90%;
			margin: auto;
			padding: 30rpx 30rpx 20rpx;
			border-radius: 20rpx;
			background-image: url($http-image-url+'static/my/tgbg.png');
			background-size: 100% 100%;
			min-height: 195rpx;

			>view {
				display: flex;

				&:nth-child(1) {
					font-size: 24rpx;
				}

				&:nth-child(2) {
					font-size: 55rpx;
					font-weight: bold;
					color: #885E24;
					justify-content: center;

					text {
						&::first-letter {
							font-size: 40rpx;
						}
					}
				}

				&:nth-child(3) {
					justify-content: flex-end;

					text {
						border: 1px solid rgba(0, 0, 0, .5);
						border-radius: 50rpx;
						padding: 5rpx 20rpx;
					}
				}
			}
		}

		.list {
			background-color: #FFFFFF;

			width: 95%;
			margin: 20rpx auto;
			border-radius: 20rpx;

			.tit {
				width: 60%;
				margin: auto;
				height: 100rpx;

				// background-color: #222222;
				text {
					display: inline-block;
					padding: 40rpx 0 30rpx;
					width: 50%;
					text-align: center;
					color: rgba(0, 0, 0, .5);

					&.active {
						color: #333333;
						position: relative;
						font-weight: bold;

						&::after {
							content: '';
							display: block;
							width: 30rpx;
							height: 5rpx;
							background-color: #333333;
							position: absolute;
							bottom: 15rpx;
							left: calc(50% - 15rpx);
						}
					}
				}
			}

			.item {
				height: 64vh;

				// overflow-y: scroll;
				>view {
					border-bottom: 1px solid rgba(0, 0, 0, .05);
					padding: 20rpx;
					display: flex;
					align-items: center;


					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}

					.lr {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.gray {
							font-size: 24rpx;
							color: gray;
						}
					}
				}
			}
		}
	}
</style>
